<script setup lang="ts">
import NewsCard from './NewsCard.vue'
import bg from '~/assets/home/home_3_02.jpg'
import h5bg from '~/assets/home/h5-home1.jpg'

import { homeDynamic } from '~/api'

const router = useRouter()

const { basicInfo } = storeToRefs(useTeamInfoStore())
const NewsArr = ref([])

onMounted(async () => {
  const res = basicInfo.value?.scheduleId ? await homeDynamic(basicInfo.value.scheduleId) : { data: [] }
  NewsArr.value = res.data
})

function handleClick() {
  router.push('/news')
}

function handleDetail(newsId) {
  router.push({ path: '/news-detail', query: { newsId, beforPath: 'home' } })
}
</script>

<template>
  <PageItem :bg="bg" :h5bg="h5bg" title="大赛动态">
    <!-- grid="~ cols-4 justify-center gap-2vw lt-lg:(cols-1)" -->
    <div m="t-4vw" class="template-main-div" grid="gap-2vw">
      <NewsCard v-for="(item, index) in NewsArr" :key="index" :newsobj="item" @detail="handleDetail" />
    </div>
    <div text-center m="t-5vw">
      <div btn @click="handleClick">
        了解更多
      </div>
    </div>
  </PageItem>
</template>

<style scoped>
.template-main-div{
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
  .template-main-div>div{
    width: calc((100% - 6vw) / 4);
  }
}
@media screen and (max-width: 768px) {
  .template-main-div>div{
    width: calc((100% - 2vw) / 2);
  }
}
</style>
